<template>
  <el-dialog title='新增技能组对应交易' :visible.sync='isShow' width='700px'  :lock-scroll=false
              :close-on-click-modal=false @close='clearForm("queryForm")'  @open="initializtaion"
             >
    <div  v-loading="loading">
      <div  class="detailInfo" >
          <el-card class='type-info-box-card'>
            <el-row>
              <el-col :lg='24'>
                    <el-form ref='queryForm' size='mini' :model="queryForm" label-width="140px"  label-position="center" :rules="rules">

                      <el-row :gutter="50">
                          <el-col :span='100' >
                              <el-form-item label='技能组名称' prop='BUSITYPE' >
                                    <el-select v-model='queryForm.BUSITYPE' filterable  style="width:350px" >
                                        <el-option v-for='item in AGENTIDS' :key='item.BUSITYPE' :label='item.BUSITYPENAME' :value='item.BUSITYPE'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                      </el-row>
                        <el-row :gutter="50">
                          <el-col :span='100' >
                              <el-form-item label='视频处理标志' prop='VIDEOFLAG' >
                                <el-radio-group  v-model='queryForm.VIDEOFLAG'>
                                 <el-radio  label="0" >不开启音视频</el-radio>
                                 <el-radio  label="1" >开启音视频</el-radio>
                                 <el-radio  label="2" >开启音频</el-radio>
                                </el-radio-group>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row :gutter="0">
                          <el-col :span='400' >
                            <el-form-item label='交易名称' prop='handleSelectValue' >
                              <div style="height:40px">
                              </div>
                                <el-transfer filterable v-model="queryForm.handleSelectValue" :props="{key:'value',label:'desc'}" :data="BUSITYPEPOOL" :titles="['交易列表','已选交易']" filter-placeholder="请选择交易"  style="width:550px;margin-left: -70px; padding-bottom:10px" >
                                </el-transfer>
                            </el-form-item>
                          </el-col>
                      </el-row>


                </el-form>
              </el-col>
            </el-row>
          </el-card>
      </div>
      <div slot="footer"  style="margin:10px 0;text-align:center">
            <el-button size="mini"  @click="isShow=false">取消</el-button>
            <el-button type='primary' size='mini'  @click="submit">确定</el-button>
      </div>
    </div>
   </el-dialog>
</template>

<script>
import DateUtils from '@/CTManage/utils/DateUtils';
import request from "@/common/utils/requestCT";
import cloudTellerAdd from  "@/message/CTManage/teller/cloud-teller-add";
import selectTree from "@/components/selectTree2/";
import getGlobalParams from '@/common/utils/getGlobalParams';
import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
// import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
import tellerMatchSkillUpdate from "@/message/CTManage/skill-transaction/skill-transaction-insert";
//交易信息查询
import transactionNameQuery from "@/message/shared/transaction-name-query";
//技能组信息
import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
//技能组对应交易查询
import channelTransaction from "@/message/CTManage/skill-transaction/skill-transaction-query";

export default {
  components: { selectTree },
  data() {
    var dealBusitype = (rule, value, callback) => {
      this._handleSelectValue = this.queryForm.handleSelectValue;
      if (value) {
        this.loading = true;
        let resBody = new channelTransaction();
        resBody.data.BUSITYPE = value;
        request(resBody)
          .then(response=>{
            if (response.SYS_HEAD.ReturnCode == "000000") {
                let result = response.RSP_BODY.resultSet;
                for (let i in this.BUSITYPEPOOL) {
                    const FLOWID_po = this.BUSITYPEPOOL[i]['value'];
                    this.BUSITYPEPOOL[i]["disabled"] = false;
                    // this.queryForm.VIDEOFLAG = '';
                    for (let j in result) {
                      // if (!this.queryForm.VIDEOFLAG) {
                      //   if (result[j]["VIDEOFLAG"]) {
                      //     this.queryForm.VIDEOFLAG = result[j]["VIDEOFLAG"];
                      //   } else {
                      //     this.queryForm.VIDEOFLAG = '';
                      //   }
                      // }
                      const FLOWID_re = result[j]["FLOWID"]
                      if (FLOWID_po === FLOWID_re) {
                        this.BUSITYPEPOOL[i]["disabled"] = true;
                      }
                    }
                }
                this.queryForm.handleSelectValue = [];
                callback();
            } else {
                this.$message({
                  type: "error",
                  message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                });
                callback(new Error("技能组信息查询失败"));
            }
            this.loading =false;
          })
          .catch(error=>{
                this.$message({
                  type: "warning",
                  message: "页面出错！"
                });
                console.error(error)
                this.loading = false;
          })
      } else {
        callback(new Error("请选择技能组"));
      }
    }
    return {
        rules: { //表单校验规则
          BUSITYPE: [
            // {
            //   required: true,
            //   message: "请选择技能组",
            //   trigger: "change"
            // },
            {
              required: true,
              validator: dealBusitype,
              trigger: "change"
            }
          ],
          // WORKDAY: [{
          //   required: true,
          //   message: "请选择工作日是否可用",
          //   trigger: "blur"
          // }],
          // HOLIDAY: [{
          //   required: true,
          //   message: "请选择节假日是否可用",
          //   trigger: "blur"
          // }],
          handleSelectValue: [{
            required: true,
            message: "请选择交易",
            trigger: "blur"
          }]
        },
      loading: false,
      brno: [],
      querySkills:[],
      BUSITYPEPOOL:[],
      oldBUSITYPE:'',
      _handleSelectValue: [],
      queryForm: {  //表单数据
        VIDEOFLAG:'',
        BUSITYPE: '',
        handleSelectValue:[],

      },
      AGENTIDS:[],
      VIDEOFLAGLIST:[
        { label: '不开启音视频', value: '0' },
        { label: '开启音视频', value: '1' },
        { label: '开启音频', value: '2' }

      ],


    };
  },
  props: { option: Object ,message:Array },
  methods: {

    initializtaion(){
      this.queryTeller();
        // this.queryForm.BUSITYPE = this.message[0].BUSITYPE;
        // console.log("ddddd",this.message[0].BUSITYPE);
        // this.queryForm.handleSelectValue = this.BUSITYPEPOOL;
        // console.log("flowid",this.message[0].FLOWID);

        // for(let i=0;i<this.queryForm.handleSelectValue.length;i++){
        //   this.queryForm.handleSelectValue[i] = parseInt(this.queryForm.handleSelectValue[i]);
        // }

        // this.oldBUSITYPE = this.message[0].FLOWID;
    },


generateData(){
      const data = [];
      for(let i=0;i<this.querySkills.length;i++){
        data.push({
          value:this.querySkills[i].FLOWID,
          desc:this.querySkills[i].FLOWNAME,
          disabled:true,
        })
      };
      this.BUSITYPEPOOL=data;
    },

    async queryTeller(nodeVal, nodeObj){
      console.log(nodeVal,nodeObj )
      let resBodyTellerQuery = new TellerSkillQuery();

      let responseTellerQuery = await request(resBodyTellerQuery);

      if (responseTellerQuery.SYS_HEAD.ReturnCode == "000000") {
        this.AGENTIDS = responseTellerQuery.RSP_BODY.resultSet;
      }else {
        this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerQuery.SYS_HEAD.ReturnCode + "，错误信息：" + responseTellerQuery.SYS_HEAD.ReturnMessage
          });
      }
    },
    submit() {
        this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new tellerMatchSkillUpdate();
          resBody.data.FLOWID = this._handleSelectValue.toString().replace("\"","").replace("[","").replace("]","");
          resBody.data.BUSITYPE = this.queryForm.BUSITYPE;
          resBody.data.VIDEOFLAG = this.queryForm.VIDEOFLAG
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.$message({
                  type: "success",
                  message: "柜员对应技能组新增成功!"
                });
                this.isShow = false;
                this.$emit("refreshTable");
              } else {
                 this.$message({
                      type: "error",
                      message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                });
              }
              this.loading = false;
             
            })
            .catch(error => {
              this.loading = false;
              console.log(error);
            });
        }
      });

       
    },
    clearForm(item) {
      if (this.BUSITYPEPOOL) {
        for (let i in this.BUSITYPEPOOL) {
          this.BUSITYPEPOOL[i]['disabled'] = true;
        }
      }
      if (this.$refs.queryForm) {
        this.$refs.queryForm.resetFields();
        this.$refs.queryForm.clearValidate();
      }
    }
  },
  computed: {
    isShow: {
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  async created() {
    // let resBody = new spinnerList();
    //   resBody.data.spinnerList = [{
    //     spinnerName: "branch"
    //   }];
    //   let response = await request(resBody);

    //   if (response.SYS_HEAD.ReturnCode == "000000") {
    //     this.brno = response.RSP_BODY.branchSpinner;
    //   } else {
    //     this.$message({
    //       type: "error",
    //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
    //     });
    //   };


       //这里是交易信息查询
      let resBodySkills = new transactionNameQuery();
      resBodySkills.QueryPageNo = this.currentPage;
      resBodySkills.QueryRowNum = this.pageSize;
      let responseSkills = await request(resBodySkills);

      if (responseSkills.SYS_HEAD.ReturnCode == "000000") {
        this.querySkills = responseSkills.RSP_BODY.resultSet;
        this.generateData();

      }else {
        this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseSkills.SYS_HEAD.ReturnCode + "，错误信息：" + responseSkills.SYS_HEAD.ReturnMessage
          });
      }
  }
  // mounted() {
  //   window.addEventListener("scroll", this.handleScroll);
  // }
};
</script>

<style lang="scss" scope>
.isShow {
  display: none;
}
.returnBtn {
  width: 50px;
  height: 50px;
  background: #000;
  opacity: 0.5;
  position: fixed;
  right: 45px;
  bottom: 53px;
  border-radius: 3px;
  text-align: center;
  padding-top: 15px;
}
.returnBtn:hover {
  opacity: 0.9;
}
.modelMargin {
  margin: 5px;
  .el-card__header {
    height: 65px;
  }
}
#returnBtnTop {
  height: 50px;
  background: #409eff;
  width: 100%;
  transition: all 0.3s;
}
.editClass {
  input.el-input__inner {
    border: none;
    background: rgba(0, 0, 0, 0) !important;
  }
}
.inputWidth100 {
  width: 100%;
}
</style>
